<template>
  <view class="container">
    <!-- 商品信息展示区域 -->
    <view v-for="(order, index) in pendingOrders" :key="index" class="shop-item">
      <view class="good">
        <image :src="order.images" mode="aspectFill" class="shop-img"></image>
        <view class="shop-text">
          <view class="order-info">
            <view class="order-id">订单号：{{ order.orderId }}</view>
            <view class="order-price">￥{{ (order.orderPrice * order.orderCount).toFixed(2) }}</view>
          </view>
          <view class="order-name">{{ order.orderName }}</view>
        </view>
        <view class="order-quantity">X {{ order.orderCount }}</view>
      </view>
      <view class="button-container">
        <button class="buy" @click="confirm(order)">确认收货</button>
        <button class="cancel" @click="openRefundForm(order)">申请退单</button>
      </view>
    </view>

    <!-- 未找到订单提示 -->
    <view v-if="pendingOrders.length === 0" class="shop-else-list">暂无</view>

    <!-- 退单理由弹出框 -->
    <uni-popup ref="popup" type="center" :mask="true">
      <view class="popup-container">
        <view class="popup-title">申请退单</view>
        <view class="popup-form">
          <textarea v-model="refundReason" placeholder="请输入退单理由" class="popup-textarea"></textarea>
        </view>
        <view class="popup-footer">
          <button class="popup-button popup-cancel" @click="closePopup">取消</button>
          <button class="popup-button popup-confirm" @click="submitRefund">确认</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import config from "@/config.js";

export default {
  data() {
    return {
      pendingOrders: [],
      refundReason: "",
      refundOrderId: null
    };
  },
  methods: {
    confirm(order) {
      console.log("确认收货按钮被点击");

      const updatedOrder = {
        ...order,
        orderState: 3
      };

      uni.request({
        url: `${config.apiUrl}/order/updateOrderStateWeb`,
        method: "POST",
        header: {
          "Content-Type": "application/json"
        },
        data: updatedOrder,
        success: (response) => {
          if (response.statusCode === 200) {
            uni.showToast({
              title: "成功确认收货",
              icon: "success"
            });
            this.fetchGoodsByState();
            this.$forceUpdate();
          } else {
            uni.showToast({
              title: "确认收货失败",
              icon: "none"
            });
          }
        },
        fail: (error) => {
          console.error("确认收货请求失败", error);
          uni.showToast({
            title: "请求失败，请重试",
            icon: "none"
          });
        }
      });
    },
    openRefundForm(order) {
      this.refundOrderId = order.orderId;
      this.$refs.popup.open();
    },
    closePopup() {
      this.$refs.popup.close();
      this.refundReason = "";
      this.refundOrderId = null;
    },
    submitRefund() {
      console.log("申请退单，订单号：" + this.refundOrderId + "，退单理由：" + this.refundReason);

      const refundOrder = {
        orderId: this.refundOrderId,
        reason: this.refundReason
      };

      uni.request({
        url: `${config.apiUrl}/order/submitReason`,
        method: "POST",
        header: {
          "Content-Type": "application/json"
        },
        data: refundOrder,
        success: (response) => {
          if (response.statusCode === 200) {
            uni.showToast({
              title: "退单申请成功",
              icon: "success"
            });
            this.closePopup();
            this.fetchGoodsByState();
            this.$forceUpdate();
          } else {
            uni.showToast({
              title: "退单申请失败",
              icon: "none"
            });
          }
        },
        fail: (error) => {
          console.error("退单申请请求失败", error);
          uni.showToast({
            title: "请求失败，请重试",
            icon: "none"
          });
        }
      });
    },
    fetchGoodsByState() {
      console.log("Fetching goods by state...");

      uni.request({
        url: `${config.apiUrl}/order/state/2`,
        method: "GET",
        success: (response) => {
          if (response.data && response.data.length > 0) {
            console.log("Fetched goods: ", response.data);
            this.pendingOrders = response.data;
          } else {
            uni.showToast({
              title: "没有找到商品",
              icon: "none"
            });
          }
          this.$forceUpdate();
        },
        fail: (error) => {
          console.error("获取商品信息请求失败", error);
          uni.showToast({
            title: "请求失败，请重试",
            icon: "none"
          });
        }
      });
    }
  },
  created() {
    this.fetchGoodsByState();
  }
};
</script>

<style>
.container {
  padding-bottom: 100rpx;
  background-color: #ffffff;
  height: 100%;
}

.shop-else-list {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 18rpx;
}

.shop-item {
  display: flex;
  flex-direction: column;
  padding: 30rpx;
  background-color: #f5f5f5;
  margin: 20rpx 0;
  border-radius: 15rpx;
}

.good {
  display: flex;
  align-items: center;
  margin-top: 15rpx;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 15rpx;
}

.shop-img {
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 10rpx;
}

.shop-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.order-info {
  display: flex;
  justify-content: space-between;
}

.order-id {
  font-size: 18rpx;
  color: #333;
}

.order-price {
  font-size: 18rpx;
  color: #333;
}

.order-name {
  font-size: 20rpx;
  color: #333;
}

.order-quantity {
  text-align: right;
  font-size: 18rpx;
  color: #666;
}

.button-container {
  display: flex;
  gap: 10rpx;
  margin-top: 10rpx;
}

.buy {
  padding: 10rpx 25rpx;
  border: 1px solid #ff5400;
  background-color: #fff;
  color: #ff5400;
  border-radius: 5rpx;
  font-size: 16rpx;
  cursor: pointer;
}

.cancel {
  padding: 10rpx 25rpx;
  border: 1px solid #cccccc;
  background-color: #f5f5f5;
  color: #808080;
  border-radius: 5rpx;
  font-size: 16rpx;
  cursor: pointer;
}

.popup-container {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 80%;
  max-width: 300rpx;
  margin: 0 auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.popup-title {
  font-size: 20rpx;
  text-align: center;
  margin-bottom: 20rpx;
}

.popup-form {
  margin-bottom: 20rpx;
}

.popup-textarea {
  width: 100%;
  height: 100rpx;
  padding: 10rpx;
  border: 1px solid #ddd;
  border-radius: 5rpx;
  font-size: 16rpx;
  resize: none;
}

.popup-footer {
  display: flex;
  justify-content: space-between;
}

.popup-button {
  padding: 10rpx 20rpx;
  border: none;
  border-radius: 5rpx;
  cursor: pointer;
}

.popup-cancel {
  background-color: #cccccc;
  color: #333;
}

.popup-confirm {
  background-color: #ff5400;
  color: white;
}

</style>
